<template>
	<view>
		<!-- 顶部新闻 -->
		<view class="tab">
			<view class="tab_title">
				<scroll-view show-scrollbar="false" scroll-x="true" class="scroll-x">
					<view>
						<image style="width: 30rpx;height: 35rpx;"
							src="https://ms.bdimg.com/pacific/0/pic/-1689231754_-516070513.jpg?x=0&y=0&h=150&w=242&vh=150.00&vw=242.00&oh=150.00&ow=242.00"
							mode=""></image>
					</view>
					<view>要闻</view>
					<view>推荐</view>
					<view>关注流</view>
					<view>24小时</view>
					<view>娱乐</view>
					<view>桂林</view>
					<view>财经</view>
					<view>生活</view>
					<view>科技</view>
					<view>军事</view>
					<view>体育</view>
					<view>汽修</view>
					<view>健康</view>
					<view>国际</view>
					<view>千里眼</view>
					<view>5G</view>
				</scroll-view>
			</view>
			<view class="wen">
				<view style="margin-left: 30rpx;">
					4C 小雨 开封 PM2.59s
				</view>
				<view class="inp">
					<input type="text" placeholder="请输入内容">
				</view>
			</view>
			<view class="ti">
				<view class="da">
					我们的2022
				</view>
				<view class="shao">
					<view class="j" style="color:  #dd524d;">置顶</view>
					<view class="j">新闻联播</view>
					<view class="j">45评</view>
				</view>
				<view class="da">
					森林大县57无大火怎么做到的
				</view>
				<view class="shao">
					<view class="j" style="color:  #dd524d;">置顶</view>
					<view class="j">新闻联播</view>
					<view class="j">17评</view>
				</view>
			</view>
			<view class="zhu">
				<!-- <view class="tu" style="width: 200rpx;height: 160rpx;"> -->
				<image src="../../../static/logo.png" style="width: 30%;height: 160rpx;" mode="scaleToFill"></image>
				<!-- </view> -->
				<view class="wenzi">
					<navigator url="../../newsinfo/index">
						a的职业是服务顾问，sa客户服务代表是最近几年来刚刚由外资企业引入中国的一个全新的岗位名称，该职位在中国传统称呼为服务顾问.
					</navigator>
				</view>
				<view class="">
					<view class="j">
						大河网
					</view>
					<view class="j">
						38评
					</view>
				</view>
			</view>
			<view class="zhu">
				<!-- <view class="tu" style="width: 200rpx;height: 160rpx;"> -->
				<image src="../../../static/logo.png" style="width: 30%;height: 160rpx;" mode="scaleToFill"></image>
				<!-- </view> -->
				<view class="wenzi">
					<navigator url="../../newsinfo/index">
						a的职业是服务顾问，sa客户服务代表是最近几年来刚刚由外资企业引入中国的一个全新的岗位名称，该职位在中国传统称呼为服务顾问.
					</navigator>
				</view>
				<view class="">
					<view class="j">
						大河网
					</view>
					<view class="j">
						38评
					</view>
				</view>
			</view>
			<view class="zhu">
				<!-- <view class="tu" style="width: 200rpx;height: 160rpx;"> -->
				<image src="../../../static/logo.png" style="width: 30%;height: 160rpx;" mode="scaleToFill"></image>
				<!-- </view> -->
				<view class="wenzi">
					<navigator url="../../newsinfo/index">
						a的职业是服务顾问，sa客户服务代表是最近几年来刚刚由外资企业引入中国的一个全新的岗位名称，该职位在中国传统称呼为服务顾问.
					</navigator>
				</view>
				<view class="">
					<view class="j">
						大河网
					</view>
					<view class="j">
						38评
					</view>
				</view>
			</view>
			<view class="zhu">
				<!-- <view class="tu" style="width: 200rpx;height: 160rpx;"> -->
				<image src="../../../static/logo.png" style="width: 30%;height: 160rpx;" mode="scaleToFill"></image>
				<!-- </view> -->
				<view class="wenzi">
					<navigator url="../../newsinfo/index">
						a的职业是服务顾问，sa客户服务代表是最近几年来刚刚由外资企业引入中国的一个全新的岗位名称，该职位在中国传统称呼为服务顾问.
					</navigator>
				</view>
				<view class="">
					<view class="j">
						大河网
					</view>
					<view class="j">
						38评
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style>
	.tu {
		margin-right: 0%;
	}

	.wenzi {
		width: 65%;
		margin-left: 5%;
	}

	.zhu {
		border-top: #000000 2rpx solid;
		margin-left: 30rpx;
		margin-right: 30rpx;
		display: flex;
		flex-wrap: wrap;
		padding-top: 30rpx;
		padding-bottom: 20rpx;
	}

	.j {
		display: inline-block;
		margin-right: 16rpx;
	}

	.ti {
		margin-left: 30rpx;
	}

	.da {
		font-size: 46rpx;
	}

	input {
		background-color: #ffffff;
	}

	.wen {
		background-color: #dd524d;
		width: 100%;
		color: #ffffff;
		display: flex;
		margin-top: 30rpx;
		height: 70rpx;
		display: flex;
		justify-content: space-around;
	}

	.two {
		margin: 0rpx 40rpx 25rpx 30rpx;
		color: #ffffff;
		margin-top: 30rpx;
		display: flex;
		flex-direction: row;
	}

	scroll-view ::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}

	.left {
		flex: 1;
		-webkit-flew: 1;
		margin-right: 70rpx;
		height: 10rpx;
	}

	.twoss {
		margin-left: 20rpx;
	}

	.twos {
		color: #ffffff;
		display: flex;
		background-color: #dd524d;
		margin-top: -10rpx;
		width: 100%;
		justify-content: space-between;
		-webkit-jutify-content: space-between;
		height: 70rpx;
	}

	.three {
		width: 100%;
		height: 120rpx;
		background-color: #dd524d;
	}

	.twree-s {
		color: #ffffff;
	}

	.scroll-x {
		height: 60rpx;
		width: 100%;
		white-space: nowrap;
	}

	.tab_title view {
		display: inline-block;
		margin-left: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #ffffff;
	}

	.tab {
		background-color: #dd524d;
		height: 100rpx;
		position: fixed;
		z-index: 1;
		left: 0;
		right: 0;
		width: 100%;
		margin-top: 0rpx;
	}
</style>
